@import "./../var.scss";
@import '@/styles/utility/position.scss';
@import '@/styles/utility/shadow.scss';

@mixin _error {
  /deep/ {
    .el-input input {
      border-color: $a3;
    }
  }
}

@mixin label {
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
  margin-bottom: 5px;
  cursor: default;
  position: relative;
  color:$f2;
  .required {
    color: $a3;
  }
  .result {
    padding: 0 10px 0 5px;
    display: none;
    &.success {
      color: $a2;
      display: inline-block;
      vertical-align: text-bottom;
    }
    &.error {
      color: $a3;
      display: inline-block;
      vertical-align: text-bottom;
    }
  }
}

@mixin body {
  position: relative;
  &.error {
    @include _error();
  }
  .field-error {
    @include absolute(100%, 0, none, 0);
    color: $a3;
    padding: 5px 8px 5px 8px;
    border: 1px solid $a3;
    border-radius: 3px;
    background: $f9;
    font-size: 12px;
    margin-top: 5px;
    @include boxShadow(7);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s 0.1s;
    z-index: 9999;
    &::before {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-top: 5px solid transparent;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 5px solid $a3;
      @include absolute(none, none, 100%, 20px);
    }
    &::after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-top: 4px solid transparent;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-bottom: 4px solid $f9;
      @include absolute(none, none, 100%, 21px);
    }
  }
  &:hover {
    .field-error {
      visibility: visible;
      opacity: 1;
    }
  }
}

@mixin description {
  font-size: 12px;
  color: $f3;
  margin-top: 5px;
  cursor: default;
  line-height: 15px;
}

